<script setup lang="ts">
import { X6Graph, type ContextMenuOptions } from "@/components/x6-graph";
import api from "@/api";
import { useRoute } from "vue-router";
import { computed, onMounted, reactive, ref } from "vue";
import type { TopologyDTO } from "@/types";
import { ErrorCode } from "@/types";
import type { Cell } from "@antv/x6";
import TopologyNodeDrawer from "./components/TopologyNodeDrawer.vue";

const { query } = useRoute();

interface State {
  topology: TopologyDTO;
  drawer: boolean;
}

const state = reactive<State>({
  drawer: false,
  topology: {
    id: "",
    json: "",
    name: ""
  }
});

const loadData = () => {
  api.topology.getById(query.id as string).then((res) => {
    if (res.code === ErrorCode.Success) {
      state.topology = res.data;
    }
  });
};

const topologyData = computed(() => {
  return JSON.parse(state.topology.json || "{}");
});

const cellRef = ref<Cell>();

const contextMenuOptions: ContextMenuOptions = {
  machineClick: (cell: Cell) => {
    state.drawer = true;
    cellRef.value = cell;
  }
};

onMounted(() => {
  loadData();
});
</script>
<template>
  <X6Graph :data="topologyData" :menu-options="contextMenuOptions" />
  <topology-node-drawer :cell="cellRef" v-model="state.drawer" />
</template>
